/* 机构列表
 *
 */
<template>
  <div>
    <div
      class="machanism-box"
      v-for="item in mechanismList"
      :key="item.id"
      @click="topath(item)"
    >
      <div class="machanism-1">
        <div class="machanism-title">
          <div class="machanism-title-l">
            <van-image
              round
              width="2.22rem"
              height="2.22rem"
              :src="item.image"
            />
          </div>
          <div class="machanism-title-r">
            <div class="machanism-title-text">
              <div class="machanism-name text-overflow">{{ item.name }}</div>
              <div class="journal-num">307日记</div>
              <div class="person-num">有999人购买过</div>
            </div>
            <van-rate
              v-model="stars"
              :size="10"
              color="#2FB6A5"
              void-icon="star"
              void-color="#eee"
            />
          </div>
        </div>
        <div class="machanism-con" v-for="(info, i) in item.product" :key="i">
          <div class="machanism-con-name text-overflow">{{ info.name }}</div>
          <div class="machanism-con-price">￥{{ info.price }}元起</div>
        </div>
        <div class="machanism-con" v-if="item.product == ''">
          <div class="machanism-con-name"></div>
          <div class="machanism-con-price">……</div>
        </div>
        <div class="machanism-con" v-if="item.product == ''">
          <div class="machanism-con-name"></div>
          <div class="machanism-con-price">……</div>
        </div>
        <div class="machanism-bottom">查看全部商品</div>
      </div>
    </div>
  </div>
</template> 

<script>
export default {
  name: "",
  props: {
    page: {
      type: Number,
      default: 1,
    },
  },
  components: {},
  data() {
    return {
      stars: 3,
      mechanismList: [],
      // product:[]
    };
  },
  methods: {
    //获取医院
    getGoodsList(e) {
      this.$api
        .getHospitalList({
          where: {
            city_id: 6,
          },
          limit: 10,
          page: this.page,
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            console.log(res);

            if (e) {
              this.mechanismList = this.mechanismList.concat(res.data);
            } else {
              this.mechanismList = res.data;
            }
            this.$emit("setLoading", false);
          }
        });
    },
    topath(item) {
      // console.log(item);
      if (sessionStorage.getItem("token")) {
        this.$router.push({
          path: "/details/hospitaldetail",
          query: {
            _id: item.id,
          },
        });
      } else {
        this.$router.push('/login')
      }
    },
  },

  created() {
    // this.getGoodsList()
  },

  mounted() {},

  computed: {},

  watch: {},
};
</script>

<style lang='scss' scoped>
$layout-size: 0 0.86rem;
//只显示几行，剩余省略号
.text-overflow {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.machanism-box {
  box-sizing: border-box;
  height: 10.16rem;
  padding: $layout-size;
  margin-bottom: 1.5rem;
  .machanism-1 {
    flex: 1;
    background-color: #fff;
    padding: 0.65rem;
    .machanism-title {
      height: 2.68rem;
      display: flex;
      .machanism-title-l {
        width: 2.22rem;
        height: 2.68rem;
        margin-right: 0.54rem;
      }
      .machanism-title-r {
        height: 2.68rem;
        flex: 1;
        .machanism-title-text {
          height: 1.22rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .machanism-name {
            width: 6.08rem;
            height: 1.22rem;
            font-size: 0.86rem;
            font-weight: 600;
            color: #333333;
            line-height: 1.22rem;
          }
          .journal-num {
            width: 3rem;
            height: 1.03rem;
            line-height: 1.03rem;
            border-radius: 0.22rem;
            border: 0.03rem solid #2fb6a5;
            font-size: 0.54rem;
            color: #2fb6a5;
          }
          .person-num {
            width: 5.59rem;
            height: 0.76rem;
            font-size: 0.54rem;
            color: #909090;
          }
        }
      }
    }
    .machanism-con {
      height: 2.38rem;
      border-bottom: 1px solid #c3c3c3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .machanism-con-name {
        width: 5.5rem;
        height: 1.08rem;
        font-size: 0.76rem;
        color: #333333;
      }
      .machanism-con-price {
        width: 6rem;
        height: 1.08rem;
        padding-left: 1rem;
        font-size: 0.76rem;
        color: #333333;
        font-weight: 600;
      }
    }
    .machanism-bottom {
      height: 2.19rem;
      font-size: 0.65rem;
      color: #909090;
      text-align: center;
      line-height: 2.19rem;
    }
  }
}
</style>